<template>
  <div
    :style="{
      border: '1px solid #dfdfdf',
      padding: '20px',
      margin: '20px auto 0',
      borderRadius: '16px',
      background: '#fff',
      width: '1200px',
      position: 'relative',
    }"
  >
    <el-form
      class="add-update-preview"
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="80px"
    >
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="订单编号"
        prop="dingdanbianhao"
      >
        <el-input
          v-model="ruleForm.dingdanbianhao"
          placeholder="订单编号"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="车牌号"
        prop="chepaihao"
      >
        <el-input
          v-model="ruleForm.chepaihao"
          placeholder="车牌号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="车辆品牌"
        prop="cheliangpinpai"
      >
        <el-input
          v-model="ruleForm.cheliangpinpai"
          placeholder="车辆品牌"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="汽车类别"
        prop="qicheleibie"
      >
        <el-input
          v-model="ruleForm.qicheleibie"
          placeholder="汽车类别"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="价格"
        prop="jiage"
      >
        <el-input
          v-model="ruleForm.jiage"
          placeholder="价格"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="租期"
        prop="zuqi"
      >
        <el-input
          v-model="ruleForm.zuqi"
          placeholder="租期"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="总价"
        prop="zongjia"
      >
        <el-input v-model="zongjia" placeholder="总价" readonly></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="出租日期"
        prop="chuzuriqi"
      >
        <el-date-picker
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd"
          v-model="ruleForm.chuzuriqi"
          type="date"
          placeholder="出租日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="账号"
        prop="zhanghao"
      >
        <el-input
          v-model="ruleForm.zhanghao"
          placeholder="账号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="姓名"
        prop="xingming"
      >
        <el-input
          v-model="ruleForm.xingming"
          placeholder="姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="手机"
        prop="shouji"
      >
        <el-input
          v-model="ruleForm.shouji"
          placeholder="手机"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="身份证"
        prop="shenfenzheng"
      >
        <el-input
          v-model="ruleForm.shenfenzheng"
          placeholder="身份证"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="管理账号"
        prop="guanlizhanghao"
      >
        <el-input
          v-model="ruleForm.guanlizhanghao"
          placeholder="管理账号"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="地址"
        prop="guanlixingming"
      >
        <div style="display: flex; width: 556px">
          <el-input v-model="ruleForm.relAddress" placeholder="地址" clearable></el-input>
          <el-dropdown
            split-button
            type="primary"
            @command="change"
            style="width: 200px"
          >
            地址选择
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="item"
                v-for="(item, index) in address"
                :key="index"
                >{{ item }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-form-item>
      <el-form-item
        :style="{
          border: '1px solid #dfdfdf',
          padding: '10px',
          boxShadow: '1px 2px 3px #eee',
          margin: '0 0 8px 0',
          borderRadius: '8px',
          background:
            'radial-gradient(circle, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%)',
        }"
        label="备注"
        prop="beizhu"
      >
        <editor
          :style="{
            minHeight: '300px',
            padding: '0',
            margin: '0',
            borderColor: '#ccc',
            backgroundColor: '#f9f9f9',
            borderRadius: '0',
            borderWidth: '0',
            width: '100%',
            borderStyle: 'solid',
            height: 'auto',
          }"
          v-model="ruleForm.beizhu"
          class="editor"
          action="file/upload"
        >
        </editor>
      </el-form-item>

      <el-form-item :style="{ padding: '0', margin: '20px 0 20px 0' }">
        <el-button
          :style="{
            border: '0',
            cursor: 'pointer',
            padding: '0',
            boxShadow: '1px 2px 6px #52a1db',
            margin: '0 20px 0 0',
            color: 'rgba(255, 255, 255, 1)',
            outline: 'none',
            borderRadius: '30%',
            background:
              'radial-gradient(circle, rgba(128,184,246,1) 0%, rgba(36,153,251,1) 100%)',
            width: '128px',
            lineHeight: '40px',
            fontSize: '14px',
            height: '40px',
          }"
          type="primary"
          @click="onSubmit"
          >提交</el-button
        >
        <el-button
          :style="{
            border: '1px solid #bbb',
            cursor: 'pointer',
            padding: '0',
            boxShadow: '1px 2px 6px #ccc',
            margin: '0',
            color: '#999',
            outline: 'none',
            borderRadius: '30%',
            background: '#fff',
            width: '128px',
            lineHeight: '40px',
            fontSize: '14px',
            height: '40px',
          }"
          @click="back()"
          >返回</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: "",
      baseUrl: "",
      address: [],
      ro: {
        dingdanbianhao: false,
        chepaihao: false,
        cheliangpinpai: false,
        qicheleibie: false,
        jiage: false,
        zuqi: false,
        zongjia: false,
        chuzuriqi: false,
        beizhu: false,
        zhanghao: false,
        xingming: false,
        shouji: false,
        shenfenzheng: false,
        guanlizhanghao: false,
        guanlixingming: false,
        sfsh: false,
        shhf: false,
        ispay: false,
      },
      type: "",
      userTableName: localStorage.getItem("UserTableName"),
      ruleForm: {
        dingdanbianhao: this.getUUID(),
        chepaihao: "",
        cheliangpinpai: "",
        qicheleibie: "",
        jiage: "",
        zuqi: "",
        zongjia: "",
        chuzuriqi: "",
        beizhu: "",
        zhanghao: "",
        xingming: "",
        shouji: "",
        shenfenzheng: "",
        guanlizhanghao: "",
        guanlixingming: "",
        ispay: "",
        relAddress:''
      },
      rules: {
        dingdanbianhao: [],
        chepaihao: [],
        cheliangpinpai: [],
        qicheleibie: [],
        jiage: [{ validator: this.$validate.isNumber, trigger: "blur" }],
        zuqi: [
          { required: true, message: "租期不能为空", trigger: "blur" },
          { validator: this.$validate.isIntNumer, trigger: "blur" },
        ],
        zongjia: [{ validator: this.$validate.isNumber, trigger: "blur" }],
        chuzuriqi: [],
        beizhu: [],
        zhanghao: [],
        xingming: [],
        shouji: [{ validator: this.$validate.isMobile, trigger: "blur" }],
        shenfenzheng: [],
        guanlizhanghao: [],
        guanlixingming: [],
        sfsh: [],
        shhf: [],
        ispay: [],
      },
    };
  },
  computed: {
    zongjia: {
      get: function () {
        return 1 * this.ruleForm.jiage * this.ruleForm.zuqi;
      },
    },
  },
  created() {
    //this.bg();
    let type = this.$route.query.type ? this.$route.query.type : "";
    this.init(type);
    this.baseUrl = this.$config.baseUrl;
    this.ruleForm.chuzuriqi = this.getCurDate();
  },
  methods: {
    change(value) {
      this.ruleForm.relAddress = value;
    },
    getMakeZero(s) {
      return s < 10 ? "0" + s : s;
    },
    // 下载
    download(file) {
      window.open(`${file}`);
    },
    // 初始化
    init(type) {
      this.type = type;
      if (type == "cross") {
        var obj = JSON.parse(localStorage.getItem("crossObj"));
        for (var o in obj) {
          if (o == "dingdanbianhao") {
            this.ruleForm.dingdanbianhao = obj[o];
            this.ro.dingdanbianhao = true;
            continue;
          }
          if (o == "chepaihao") {
            this.ruleForm.chepaihao = obj[o];
            this.ro.chepaihao = true;
            continue;
          }
          if (o == "cheliangpinpai") {
            this.ruleForm.cheliangpinpai = obj[o];
            this.ro.cheliangpinpai = true;
            continue;
          }
          if (o == "qicheleibie") {
            this.ruleForm.qicheleibie = obj[o];
            this.ro.qicheleibie = true;
            continue;
          }
          if (o == "jiage") {
            this.ruleForm.jiage = obj[o];
            this.ro.jiage = true;
            continue;
          }
          if (o == "zuqi") {
            this.ruleForm.zuqi = obj[o];
            this.ro.zuqi = true;
            continue;
          }
          if (o == "zongjia") {
            this.ruleForm.zongjia = obj[o];
            this.ro.zongjia = true;
            continue;
          }
          if (o == "chuzuriqi") {
            this.ruleForm.chuzuriqi = obj[o];
            this.ro.chuzuriqi = true;
            continue;
          }
          if (o == "beizhu") {
            this.ruleForm.beizhu = obj[o];
            this.ro.beizhu = true;
            continue;
          }
          if (o == "zhanghao") {
            this.ruleForm.zhanghao = obj[o];
            this.ro.zhanghao = true;
            continue;
          }
          if (o == "xingming") {
            this.ruleForm.xingming = obj[o];
            this.ro.xingming = true;
            continue;
          }
          if (o == "shouji") {
            this.ruleForm.shouji = obj[o];
            this.ro.shouji = true;
            continue;
          }
          if (o == "shenfenzheng") {
            this.ruleForm.shenfenzheng = obj[o];
            this.ro.shenfenzheng = true;
            continue;
          }
          if (o == "guanlizhanghao") {
            this.ruleForm.guanlizhanghao = obj[o];
            this.ro.guanlizhanghao = true;
            continue;
          }
          if (o == "guanlixingming") {
            this.ruleForm.guanlixingming = obj[o];
            this.ro.guanlixingming = true;
            continue;
          }
        }
      }
      // 获取用户信息
      this.$http
        .get(this.userTableName + "/session", { emulateJSON: true })
        .then((res) => {
          if (res.data.code == 0) {
            var json = res.data.data;
            if ((json.zhanghao != "" && json.zhanghao) || json.zhanghao == 0) {
              this.ruleForm.zhanghao = json.zhanghao;
            }
            if ((json.xingming != "" && json.xingming) || json.xingming == 0) {
              this.ruleForm.xingming = json.xingming;
            }
            if ((json.shouji != "" && json.shouji) || json.shouji == 0) {
              this.ruleForm.shouji = json.shouji;
            }
            if (
              (json.shenfenzheng != "" && json.shenfenzheng) ||
              json.shenfenzheng == 0
            ) {
              this.ruleForm.shenfenzheng = json.shenfenzheng;
            }
            if ((json.address != "" && json.address) || json.address == 0) {
              this.address = json.address;
            }
          }
        });
    },

    // 多级联动参数
    // 多级联动参数
    info(id) {
      this.$http
        .get("zuchedingdan/detail/${id}", { emulateJSON: true })
        .then((res) => {
          if (res.data.code == 0) {
            this.ruleForm = res.data.data;
          }
        });
    },
    // 提交
    onSubmit() {
      this.ruleForm.zongjia = this.zongjia;

      //更新跨表属性
      var crossuserid;
      var crossrefid;
      var crossoptnum;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.type == "cross") {
            var statusColumnName = localStorage.getItem("statusColumnName");
            var statusColumnValue = localStorage.getItem("statusColumnValue");
            if (statusColumnName && statusColumnName != "") {
              var obj = JSON.parse(localStorage.getItem("crossObj"));
              if (!statusColumnName.startsWith("[")) {
                for (var o in obj) {
                  if (o == statusColumnName) {
                    obj[o] = statusColumnValue;
                  }
                }
                var table = localStorage.getItem("crossTable");
                this.$http.post(table + "/update", obj).then((res) => {});
              } else {
                crossuserid = Number(localStorage.getItem("userid"));
                crossrefid = obj["id"];
                crossoptnum = localStorage.getItem("statusColumnName");
                crossoptnum = crossoptnum.replace(/\[/, "").replace(/\]/, "");
              }
            }
          }
          if (crossrefid && crossuserid) {
            this.ruleForm.crossuserid = crossuserid;
            this.ruleForm.crossrefid = crossrefid;
            var params = {
              page: 1,
              limit: 10,
              crossuserid: crossuserid,
              crossrefid: crossrefid,
            };
            this.$http
              .get("zuchedingdan/list", {
                params: params,
              })
              .then((res) => {
                if (res.data.data.total >= crossoptnum) {
                  this.$message({
                    message: localStorage.getItem("tips"),
                    type: "success",
                    duration: 1500,
                  });
                  return false;
                } else {
                  // 跨表计算

                  this.$http
                    .post("zuchedingdan/add", this.ruleForm)
                    .then((res) => {
                      if (res.data.code == 0) {
                        this.$message({
                          message: "操作成功",
                          type: "success",
                          duration: 1500,
                          onClose: () => {
                            this.$router.go(-1);
                          },
                        });
                      } else {
                        this.$message({
                          message: res.data.msg,
                          type: "error",
                          duration: 1500,
                        });
                      }
                    });
                }
              });
          } else {
            this.$http
              .post("zuchedingdan/add", this.ruleForm, this.address)
              .then((res) => {
                if (res.data.code == 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.$router.go(-1);
                    },
                  });
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "error",
                    duration: 1500,
                  });
                }
              });
          }
        }
      });
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    // 返回
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-date-editor.el-input {
  width: auto;
}

.add-update-preview .el-form-item /deep/ .el-form-item__label {
  padding: 0 10px 0 0;
  color: #666;
  font-weight: 500;
  width: 80px;
  font-size: 14px;
  line-height: 40px;
  text-align: right;
}

.add-update-preview .el-form-item /deep/ .el-form-item__content {
  margin-left: 80px;
}

.add-update-preview .el-input /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 12px;
  outline: none;
  color: #999;
  background: #f9f9f9;
  width: 400px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-select /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
  outline: none;
  color: #999;
  background: #f9f9f9;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview .el-date-editor /deep/ .el-input__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px 0 30px;
  outline: none;
  color: #999;
  background: #f9f9f9;
  width: 200px;
  font-size: 14px;
  height: 40px;
}

.add-update-preview /deep/ .el-upload--picture-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  width: auto;
  height: auto;
  line-height: initial;
  vertical-align: middle;
}

.add-update-preview /deep/ .upload .upload-img {
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 6px;
  color: #999;
  background: #f9f9f9;
  width: 200px;
  font-size: 32px;
  line-height: 180px;
  text-align: center;
  height: 180px;
}

.add-update-preview /deep/ .el-upload-list .el-upload-list__item {
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 6px;
  color: #999;
  background: #f9f9f9;
  width: 200px;
  font-size: 32px;
  line-height: 180px;
  text-align: center;
  height: 180px;
}

.add-update-preview /deep/ .el-upload .el-icon-plus {
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 6px;
  color: #999;
  background: #f9f9f9;
  width: 200px;
  font-size: 32px;
  line-height: 180px;
  text-align: center;
  height: 180px;
}

.add-update-preview .el-textarea /deep/ .el-textarea__inner {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 12px;
  outline: none;
  color: #999;
  background: #f9f9f9;
  width: 400px;
  font-size: 14px;
  min-height: 120px;
}
</style>
